<template>
	<div class="page">
		<el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm"
			@keyup.enter.native="refreshList()" @submit.native.prevent>
			<!-- 搜索框-->
			<!-- <el-form-item prop="applyuser.id">
            <user-select :limit='1' size="small" placeholder="请选择申请人" :value="searchForm.applyuser.id" @getValue='(value) => {searchForm.applyuser.id=value}'></user-select>
         </el-form-item> -->
			<!-- <el-form-item prop="depart.id">
            <SelectTree
                  ref="depart.id"
                  :props="{
                      value: 'id',             // ID字段名
                      label: 'name',         // 显示名称
                      children: 'children'    // 子级字段名
                    }"
                  size="small" 
                  placeholder="请选择所属部门"
                  :url="`/sys/office/treeData?type=2`"
                  :value="searchForm.depart.id"
                  :clearable="true"
                  :accordion="true"
                  @getValue="(value) => {searchForm.depart.id=value}"/>
         </el-form-item> -->
			<el-form-item prop="carinfo.id">
				<GridSelect title="选择车辆" placeholder="请选择车辆" labelName='carno' labelValue='id'
					:value="searchForm.carinfo.id" :limit="1" size="small"
					@getValue='(value) => {searchForm.carinfo.id=value}' :columns="[
                    {
                      prop: 'carno',
                      label: '车牌号'
                    },
                    {
                      prop: 'brand',
                      label: '品牌'
                    },
                    {
                      prop: 'cartype',
                      label: '车型'
                    }
                    ]" :searchs="[
                    {
                      prop: 'carno',
                      label: '车牌号'
                    },
                    {
                      prop: 'brand',
                      label: '品牌'
                    },
                    {
                      prop: 'cartype',
                      label: '车型'
                    }
                    ]" dataListUrl="/dlyrl/oa/carinfo/oaCarinfo/list" entityBeanName="oaCarinfo"
					queryEntityUrl="/dlyrl/oa/carinfo/oaCarinfo/queryById">
				</GridSelect>
			</el-form-item>
			<el-form-item style="float: right">
				<el-button type="primary" @click="refreshList()" size="small">查询</el-button>
				<el-button @click="resetSearch()" size="small">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 导入导出-->
		<el-dialog title="导入Excel" :visible.sync="isImportCollapse">
			<el-form :inline="true" v-show="isImportCollapse" class="query-form" ref="importForm">
				<el-form-item>
					<el-button type="default" @click="downloadTpl()" size="small">下载模板</el-button>
				</el-form-item>
				<el-form-item prop="loginName">
					<el-upload class="upload-demo"
						:action="`${this.$http.BASE_URL}/dlyrl/oa/applycar/oaApplyCar/import`"
						:on-success="uploadSuccess" :show-file-list="true">
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只允许导入“xls”或“xlsx”格式文件！</div>
					</el-upload>
				</el-form-item>
			</el-form>
		</el-dialog>
		<div class="bg-white top">
			<el-row>
				<!-- <el-button v-if="hasPermission('dlyrl:oa:applycar:oaApplyCar:add')" type="primary" size="small" icon="el-icon-plus" @click="add()">新建</el-button> -->
				<!-- <el-button v-if="hasPermission('dlyrl:oa:applycar:oaApplyCar:edit')" type="warning" size="small" icon="el-icon-edit-outline" @click="edit()" -->
				<!-- :disabled="dataListSelections.length != 1" plain>修改</el-button> -->
				<!-- <el-button v-if="hasPermission('dlyrl:oa:applycar:oaApplyCar:del')" type="danger"   size="small" icon="el-icon-delete" @click="del()"
                  :disabled="dataListSelections.length <= 0" plain>删除
        </el-button> -->
				<el-button-group class="pull-right">
					<el-button v-if="hasPermission('dlyrl:oa:applycar:oaApplyCar:import')" type="default" size="small"
						icon="el-icon-upload2" title="导入"
						@click="isImportCollapse = !isImportCollapse, isSearchCollapse=false"></el-button>
					<el-button v-if="hasPermission('dlyrl:oa:applycar:oaApplyCar:export')" type="default" size="small"
						icon="el-icon-download" title="导出" @click="exportExcel()"></el-button>
					<el-button type="default" size="small" icon="el-icon-refresh" @click="refreshList">
					</el-button>
				</el-button-group>
			</el-row>
			<el-table :data="dataList" :cell-style="cellStyle" :row-class-name="tableRowClassName"
				:header-cell-class-name="cellHeadStyle" style="width:100%; border:1px solid #d6cfe2;"
				@selection-change="selectionChangeHandle" @sort-change="sortChangeHandle" v-loading="loading"
				size="small" height="calc(100% - 80px)" class="table">
				<!-- @expand-change="detail -->
				<el-table-column type="selection" header-align="center" align="center" width="50">
				</el-table-column>
				<!-- <el-table-column type="expand">
        eslint-disable-next-line
      <template slot-scope="scope">
      <el-tabs>
            </el-tabs>
      </template>
      </el-table-column> -->
				<el-table-column prop="applyuser.name" show-overflow-tooltip align="center" label="申请人">
					<!-- <template slot-scope="scope">
              <el-link  type="primary" :underline="false" v-if="hasPermission('dlyrl:oa:applycar:oaApplyCar:edit')" @click="edit(scope.row.id)">{{scope.row.applyuser.name}}</el-link>
              <el-link  type="primary" :underline="false" v-else-if="hasPermission('dlyrl:oa:applycar:oaApplyCar:view')"  @click="view(scope.row.id)">{{scope.row.applyuser.name}}</el-link>
              <span v-else>{{scope.row.applyuser.name}}</span>
            </template> -->
				</el-table-column>
				<el-table-column prop="company.name" show-overflow-tooltip align="center" label="所属公司">
				</el-table-column>
				<el-table-column prop="applydate" show-overflow-tooltip align="center" label="申请时间">
				</el-table-column>
				<el-table-column prop="depart.name" show-overflow-tooltip align="center" label="所属部门">
				</el-table-column>
				<el-table-column prop="startdate" show-overflow-tooltip align="center" label="出车日期">
				</el-table-column>
				<el-table-column prop="starttime" show-overflow-tooltip align="center" label="出车时间">
				</el-table-column>
				<el-table-column prop="enddate" show-overflow-tooltip align="center" label="回程日期">
				</el-table-column>
				<el-table-column prop="endtime" show-overflow-tooltip align="center" label="回程时间">
				</el-table-column>
				<el-table-column prop="carinfo.carno" show-overflow-tooltip align="center" label="车辆">
				</el-table-column>
				<el-table-column prop="content" show-overflow-tooltip align="center" label="用途">
				</el-table-column>
				<!-- <el-table-column
        header-align="center"
        align="center"
        fixed="right"
        :key="Math.random()"
        width="200"
        label="操作">
        <template  slot-scope="scope">
          <el-button v-if="hasPermission('dlyrl:oa:applycar:oaApplyCar:view')" type="text" icon="el-icon-view" size="mini" @click="view(scope.row.id)">查看</el-button>
          <el-button v-if="hasPermission('dlyrl:oa:applycar:oaApplyCar:edit')" type="text" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)">修改</el-button>
          <el-button v-if="hasPermission('dlyrl:oa:applycar:oaApplyCar:del')" type="text"  icon="el-icon-delete" size="mini" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column> -->
			</el-table>
			<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageNo"
				:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" background
				layout="total, sizes, prev, pager, next, jumper">
			</el-pagination>
		</div>
		<!-- 弹窗, 新增 / 修改 -->
		<!-- <OaApplyCarForm  ref="oaApplyCarForm" @refreshDataList="refreshList"></OaApplyCarForm> -->
	</div>
</template>

<script>
	import OaApplyCarForm from './OaApplyCarForm'
	import UserSelect from '@/components/userSelect'
	import SelectTree from '@/components/treeSelect/treeSelect.vue'
	import GridSelect from '@/components/gridSelect'
	import tableStyles from '../../../../../utils/mixins'
	export default {
		mixins: [tableStyles],
		data() {
			return {
				searchForm: {
					applyuser: {
						id: ''
					},
					depart: {
						id: ''
					},
					carinfo: {
						id: ''
					}
				},
				dataList: [],
				pageNo: 1,
				pageSize: 10,
				total: 0,
				orderBy: '',
				dataListSelections: [],
				isImportCollapse: false,
				loading: false
			}
		},
		components: {
			UserSelect,
			SelectTree,
			GridSelect,
			OaApplyCarForm
		},
		activated() {
			this.refreshList()
		},
		methods: {
			// 获取数据列表
			refreshList() {
				this.loading = true
				this.$http({
					url: '/dlyrl/oa/applycar/oaApplyCar/list',
					method: 'get',
					params: {
						'pageNo': this.pageNo,
						'pageSize': this.pageSize,
						'orderBy': this.orderBy,
						'company': this.$store.state.user.companyId,
						...this.searchForm
					}
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.dataList = data.page.list
						this.total = data.page.count
						this.loading = false
					}
				})
			},
			// 每页数
			sizeChangeHandle(val) {
				this.pageSize = val
				this.pageNo = 1
				this.refreshList()
			},
			// 当前页
			currentChangeHandle(val) {
				this.pageNo = val
				this.refreshList()
			},
			// 多选
			selectionChangeHandle(val) {
				this.dataListSelections = val
			},

			// 排序
			sortChangeHandle(obj) {
				if (obj.order === 'ascending') {
					this.orderBy = obj.prop + ' asc'
				} else if (obj.order === 'descending') {
					this.orderBy = obj.prop + ' desc'
				} else {
					this.orderBy = ''
				}
				this.refreshList()
			},
			//   // 新增
			//   add () {
			//     this.$refs.oaApplyCarForm.init('', 'add')
			//   },
			//   // 修改
			//   edit (id) {
			//     id = id || this.dataListSelections.map(item => {
			//       return item.id
			//     })[0]
			//     this.$refs.oaApplyCarForm.init(id, 'edit')
			//   },
			//   // 查看
			//   view (id) {
			//     this.$refs.oaApplyCarForm.init(id, 'view')
			//   },
			//   // 删除
			//   del (id) {
			//     let ids = id || this.dataListSelections.map(item => {
			//       return item.id
			//     }).join(',')
			//     this.$confirm(`确定删除所选项吗?`, '提示', {
			//       confirmButtonText: '确定',
			//       cancelButtonText: '取消',
			//       type: 'warning'
			//     }).then(() => {
			//       this.loading = true
			//       this.$http({
			//         url: '/dlyrl/oa/applycar/oaApplyCar/delete',
			//         method: 'delete',
			//         params: {'ids': ids}
			//       }).then(({data}) => {
			//         if (data && data.success) {
			//           this.$message.success(data.msg)
			//           this.refreshList()
			//         }
			//         this.loading = false
			//       })
			//     })
			//   },
			//  // 查看详情
			//   detail (row) {
			//     this.$http.get(`/dlyrl/oa/applycar/oaApplyCar/queryById?id=${row.id}`).then(({data}) => {
			//       this.dataList.forEach((item, index) => {
			//         if (item.id === row.id) {
			//         }
			//       })
			//     })
			//   },
			// 导入成功
			uploadSuccess(res, file) {
				if (res.success) {
					this.$message.success({
						dangerouslyUseHTMLString: true,
						message: res.msg
					})
				} else {
					this.$message.error(res.msg)
				}
			},
			// 下载模板
			downloadTpl() {
				this.$utils.download('/dlyrl/oa/applycar/oaApplyCar/import/template')
			},
			exportExcel() {
				let params = {
					...this.searchForm
				}
				this.$utils.download('/dlyrl/oa/applycar/oaApplyCar/export', params)
			},
			resetSearch() {
				this.$refs.searchForm.resetFields()
				this.refreshList()
			}
		}
	}
</script>
